.mergecard {

  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding-top: 100px;
  background-color: rgba(0, 0, 0, 1);

  :global {

    .am-grid {
      padding: 15px;
      margin-top: 20px;
    }

    .am-grid .am-flexbox .am-flexbox-item .am-grid-item-content {
      padding: 0;
    }

    .am-grid.am-grid-square .am-grid-item .am-grid-item-inner-content .am-grid-icon {
      width: 100% !important;
      margin-top: 0;
      height: 100%;
    }

  }

}

:global {

  .mergecard {
    animation-duration: 1s;
    animation-timing-function: ease;
    position: relative;

    .mask {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.7);
      transition: background-color 1s ease;
    }
  }

  .mergecard-left-up {
    animation-name: mergecard-left-up;
  }

  .mergecard-left-down {
    animation-name: mergecard-left-down;
  }

  .mergecard-right-up {
    animation-name: mergecard-right-up;
  }

  .mergecard-right-down {
    animation-name: mergecard-right-down;
  }

}
